<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/wellcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商家管理</el-breadcrumb-item>
            <el-breadcrumb-item>新增商家</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="box-card">
            <!-- 头部标签 -->
            <div slot="header" class="clearfix">
                <span><i class="el-icon-menu">操作面板</i></span>
            </div>
            <el-row>
                <el-col :span="10">

                    <el-form label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
                        <!-- 商家图片 -->
                        <el-form-item label="日志图片" prop="d_img">
                            <el-upload class="avatar-uploader" action="http://localhost:9000/upload" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="ruleForm.d_img" :src="ruleForm.d_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <!-- 商家其他信息 -->
                        <el-form-item label="伴宠人" prop="d_man_name">
                            <el-input type="text" v-model="ruleForm.d_man_name" placeholder="请输入伴宠人" />
                        </el-form-item>

                        <el-form-item label="发布城市" prop="d_city">
                            <el-input type="text" v-model="ruleForm.d_city" placeholder="请输入城市" />
                        </el-form-item>
                        <el-form-item label="发布时间" prop="d_time">
                            <el-date-picker v-model="ruleForm.d_time" type="datetime" placeholder="选择日期时间"
                                default-time="12:00:00">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="日志内容" prop="d_detail">
                            <el-input type="text" v-model="ruleForm.d_detail" placeholder="请输入日志详情" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-check" @click="submitForm('ruleForm')">添加</el-button>
                            <el-button icon="el-icon-refresh-right" @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
  
<script>
import { addDatiry } from '@/http/api'
export default {
    data() {
        return {
            ruleForm: {    // 接收表单数据
                d_img: '',
                d_man_name: '',
                d_city: '',
                d_time: '',
                d_detail: ''
            },
            // 校验规则
            rules: {
                d_img: [
                    { required: true, message: '请选择伴宠照片', trigger: 'change' },
                ],
                d_man_name: [
                    { required: true, message: '请填写伴宠人姓名', trigger: 'blur' }
                ],
                b_city: [
                    { required: true, message: '请填写所在城市', trigger: 'blur' }
                ],
                d_time: [
                    { required: true, message: '请填写发布时间', trigger: 'blur' }
                ],
                d_detail: [
                    { required: true, message: '请填写日志详情', trigger: 'blur' }
                ]

            }
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.ruleForm.d_img = res.data
            console.log('图片位于服务器的地址：', res.data);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或者格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 提交表单
        submitForm(ruleForm) {
            this.ruleForm.d_time = this.$moment(this.ruleForm.d_time).format('YYYY-MM-DD HH:mm:ss')
            // 校验表单， 校验之前，需要在rules中配置校验规则
            this.$refs[ruleForm].validate((valid) => {
                // 校验通过
                if (valid) {
                    // 发起请求
                    addDatiry(this.ruleForm).then(res => {
                        if (res?.data?.code == 200) {
                            this.$message.success(res?.data?.msg)
                            // 清空表单
                            this.resetForm(ruleForm)
                        }
                        console.log('添加商家信息返回', res.data);
                    }).catch(err => {
                        this.$message.error(err)
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 重置表单
        resetForm(ruleForm) {
            this.$refs[ruleForm].resetFields();
        }
    }
}
</script>
  
<style>
.el-breadcrumb {
    margin-bottom: 20px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}

.avatar {
    width: 150px;
    height: 150px;
    display: block;
}
</style>